<template>
  <template v-if=" User != null ">
    <van-cell-group>
      <van-cell title="昵称" is-link to="/user/edit" :value="User.username"
                @click="toEdit('username', '昵称', User.username)"/>
      <van-cell title="账号" :value="User.userAccount"/>
      <van-cell title="头像" is-link to="/user/edit" :value="User.avatarUrl"
                @click="toEditAvatar('avatarUrl', '头像', User.avatarUrl)">
        <img height="40px" :src="User.avatarUrl">
      </van-cell>
      <van-cell title="个人简介" :value="User.profile"/>

      <van-cell title="标签" is-link @click="toEditTags(User.tags)">
        <template #value>
          <div class="tag-container">
            <van-tag v-for="tag in User.tags" :key="tag" type="primary" size="medium" round plain>
              {{ tag }}
            </van-tag>
          </div>
        </template>
      </van-cell>
      <van-cell title="性别" is-link to="/user/edit" :value="User.gender"
                @click="toEdit('gender', '性别', User.gender)"/>
      <van-cell title="手机号" is-link to="/user/edit" :value="User.phone"
                @click="toEdit('phone', '手机号', User.phone)"/>
<!--      <van-cell title="" is-link to="/user/edit" :value="user.phone"-->
<!--                @click="toEdit('phone', '手机号', user.phone)"/>-->
      <van-cell title="邮箱" is-link to="/user/edit" :value="User.email" @click="toEdit('email', '邮箱', User.email)"/>
      <van-cell title="星球编号" :value="User.planetCode"/>
      <van-cell title="创建时间" :value="User.createTime"/>
    </van-cell-group>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref, onActivated} from "vue";
import {showFailToast} from "vant";
import {getCurrentUser} from "../../sevices/User.ts";
import 'vant/lib/index.css';

const router = useRouter();

const User = ref();

// 封装获取用户信息的方法（复用）
const fetchUserInfo = async () => {
  const result = await getCurrentUser();
  if (result) {
    User.value = result;
    // 性别转换保持不变
    User.value.gender = result?.gender === 0 ? '男' : '女';
    // 处理标签数据 - 确保即使解析失败也不会出错
    try {
      User.value.tags = JSON.parse(result.tags || '[]');
    } catch (e) {
      console.error('标签解析失败', e);
      User.value.tags = [];
    }
  } else {
    showFailToast('获取用户信息失败');
  }
};

// 首次挂载时执行
onMounted(() => {
  fetchUserInfo();
});

// 关键：返回页面时（无论是否缓存），重新获取数据
onActivated(() => {
  fetchUserInfo(); // 强制刷新最新数据
});

/**
 * 跳转到编辑页面
 * @param editKey
 * @param editName
 * @param editValue
 */
const toEdit = (editKey: string, editName: string, editValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editValue,
      editName
    }
  });
}

/**
 * 跳转到编辑头像页面
 * @param editKey
 * @param editName
 * @param editValue
 */
const toEditAvatar = (editKey: string, editName: string, editValue: string) => {
  router.push({
    path: '/user/editAvatar',
    query: {
      editKey,
      editValue,
      editName
    }
  });
}

/**
 * 跳转到编辑标签页面
 * @param tags
 */
const toEditTags = (tags: string) => {
  router.push({
    path: '/user/editTags',
    query: {
      tags,
    }
  });
}


</script>

<style scoped>
/* 适配标签样式 */
.van-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>